﻿@model ImageCropper.Web.ViewModels.EditorModel
@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>ImageCropping</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <script type="text/javascript" src="@Url.Content("~/Scripts/crop/jquery.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/crop/jquery.Jcrop.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.Jcrop.css")"/>
        <link rel="stylesheet" href="@Url.Content("~/Content/editor.css")"/>
        <script type="text/javascript">
            var imageNameOriginal = '@Model.ImageName';
            var imageNameUnique = '@Model.ImageNameUnique';
            var savePath = '@Model.SavePath';
            var imageUrl = '@Model.ImageUrl';
            var imageUrlTemp = '@Model.ImageUrlTemp';
            var imageExtension = '@Model.ImageExtension';
            var jcrop_api;
            var cropX;
            var cropY;
            var cropHeight;
            var cropWidth;
            var resizeHeight;
            var resizeWidth;
            var clicked = true;
            var startCoordX;
            var startCoordY;
            var startWidth;
            var startHeight;
            var isResizing;
            var isCropping;
            var startWidthBackup;
            var startHeightBackup;
            var hasChanges = false;
            var originalWidth = @Model.OriginalWidth;
            var originalHeight = @Model.OriginalHeight;         
        </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/Editor.js")"></script>
    </head>
    <body>
        <div id="icons" style="height: 20px; position: fixed; z-index: 1000; top: 0; left: 0; padding-left: 5px; width: 100%; background-color: #eee">
            <div class="icon">
                <a href="#" id="save" title="Save" class="disabled">
                    <img src="/Content/icons/save.gif" width="16" height="16" alt="Apply" border="0" /><span class="caption">Save</span>
                </a>
            </div>
            <div class="icon">
                <a href="#" id="crop" title="Crop">
                    <img src="/Content/icons/crop.gif" width="16" height="16" alt="Apply" border="0" /><span class="caption">Crop</span>
                </a>
            </div>
            <div class="icon">
                <a href="#" id="resize" title="Resize">
                    <img src="/Content/icons/resize.gif" width="16" height="16" alt="Apply" border="0" /><span class="caption">Resize</span>
                </a>
            </div>
            <div class="icon">
                <a href="#" id="apply" title="Apply" style="display: none;">
                    <img src="/Content/icons/accept.png" width="16" height="16" alt="Apply" border="0" /><span class="caption">Apply</span>
                </a>
            </div>
            <div class="icon">
                <a href="#" id="cancel" title="Cancel" style="display: none;">
                    <img src="/Content/icons/cancel.png" width="16" height="16" alt="Apply" border="0" /><span class="caption">Cancel</span>
                </a>
            </div>
        </div>
        <div id="editArea" style="position: absolute; top: 25px;">
            <div id="image" style="position: absolute;">
                <div id="imageSelection_wrapper" style="display: block; position: absolute; top: 0; left: 0;">
                    <img id="cropbox" src="@Model.ImageUrlTemp" style="position: absolute; z-index: 10; top:0; left: 0;" alt="" />
                </div>
            </div>
            <div id="imageSelection_container" style="position: relative; display: none;">
                <span id="imageSelection_tl" class="selection-corner" style="left: -4px; top: -4px; width: 8px; height: 8px; cursor: nw-resize;"></span>
                <span id="imageSelection_bl" class="selection-corner" style="left: -4px; width: 8px; height: 8px; cursor: sw-resize;"></span>
                <span id="imageSelection_tr" class="selection-corner" style="top: -4px; width: 8px; height: 8px; cursor: ne-resize;"></span>
                <span id="imageSelection_br" class="selection-corner" style="width: 8px; height: 8px; cursor: se-resize;"></span>
                <span id="imageSelection_t" class="selection-corner" style="top: -4px; width: 8px; height: 8px; cursor: n-resize;"></span>
                <span id="imageSelection_b" class="selection-corner" style="width: 8px; height: 8px; cursor: s-resize;"></span>
                <span id="imageSelection_r" class="selection-corner" style="width: 8px; height: 8px; cursor: e-resize;"></span>
                <span id="imageSelection_l" class="selection-corner" style="left: -4px; width: 8px; height: 8px; cursor: w-resize;"></span>
                <img id="preview" src="@Model.ImageUrlTemp" style="max-width: 450px; max-height: 460px;"/>
            </div>
        </div>
    </body>
</html>
